<template>
  <div class='big-screen-wrapper'>
    <div class='title-wrapper'>
      <div class='title'>投标合规性检查模型</div>
      <div class='category'>
        <a-select
          show-search
          v-model='selectProject'
          @change='handleProjectChange'
        >
          <a-select-option value='1'>
            项目1
          </a-select-option>
          <a-select-option value='2'>
            项目2
          </a-select-option>

        </a-select>
      </div>
    </div>
    <div class='content-wrapper'>
      <div class='left-wrapper'>
        <div class='left-wrapper-1'>
          <div class='chart-title'>项目概况...</div>
          <div style='margin: 10px 20px;width: calc(100% - 40px);margin-top:40px;background: #07313F'>
            <a-row>
              <a-col :md='24'>洛阳市孟津区</a-col>
            </a-row>
            <a-row>
              <a-col :md='6' class='title'>项目类型</a-col>
              <a-col :md='6' class=''></a-col>
              <a-col :md='6' class='title'>项目投向</a-col>
              <a-col :md='6' class=''></a-col>
            </a-row>
            <a-row>
              <a-col :md='6' class='title'>行业分类</a-col>
              <a-col :md='6' class=''></a-col>
              <a-col :md='6' class='title'>中铁中标额</a-col>
              <a-col :md='6' class=''></a-col>
            </a-row>
            <a-row>
              <a-col :md='6' class='title'>事业主单位</a-col>
              <a-col :md='18' class=''></a-col>
            </a-row>
            <a-row>
              <a-col :md='6' class='title'>项目所在地</a-col>
              <a-col :md='18' class=''></a-col>
            </a-row>
          </div>
        </div>
        <div class='left-wrapper-2'>
          <div class='chart-title'>工程施工调查报告...</div>
          <div style='margin: 10px 20px;width: calc(100% - 40px);margin-top:40px;background: #07313F'>
            <a-row>
              <a-col :md='6' class='title'>施工现场调查时间</a-col>
              <a-col :md='18' class=''></a-col>
            </a-row>
            <a-row>
              <a-col :md='6' class='title'>施工现场调查情况</a-col>
              <a-col :md='18' class=''></a-col>
            </a-row>
            <a-row>
              <a-col :md='6' class='title'>施工现场调查报告</a-col>
              <a-col :md='18' class=''></a-col>
            </a-row>
            <a-row class='yellow'>
              <a-col :md='6' class='title'>业主情况调查时间</a-col>
              <a-col :md='18' class=''></a-col>
            </a-row>
            <a-row class='yellow'>
              <a-col :md='6' class='title'>业主情况调查情况</a-col>
              <a-col :md='18' class=''></a-col>
            </a-row>
            <a-row class='yellow'>
              <a-col :md='6' class='title'>业主情况调查报告</a-col>
              <a-col :md='18' class=''></a-col>
            </a-row>
          </div>
        </div>
        <div class='left-wrapper-3'>
          <div class='chart-title'>工程量清单...</div>
          <div style='margin: 10px 20px;width: calc(100% - 40px);margin-top:20px;background: #07313F'>
            <a-row>
              <a-col :md='24' class=''>工程量清单</a-col>
              <a-col :md='24' class=''>《xxxxxxxxxxxxxx》.pdf</a-col>
            </a-row>
            <a-row>
              <a-col :md='24' class=''>工程量清单</a-col>
              <a-col :md='24' class=''>《xxxxxxxxxxxxxx》.pdf</a-col>
            </a-row>
            <a-row>
              <a-col :md='24' class=''>工程量清单</a-col>
              <a-col :md='24' class=''>《xxxxxxxxxxxxxx》.pdf</a-col>
            </a-row>
            <a-row>
              <a-col :md='24' class=''>工程量清单</a-col>
              <a-col :md='24' class=''>《xxxxxxxxxxxxxx》.pdf</a-col>
            </a-row>
          </div>

        </div>
      </div>
      <div :class="'middle-wrapper'">
        <div class='middle-wrapper-1'>

        </div>
        <div class='middle-wrapper-2'>
          <div class='chart-title'>标前成本测算...</div>
          <a-table  :columns='middleWrapper2_1Cols' :data-source='middleWrapper2_1Data'></a-table>
          <a-table  :columns='middleWrapper2_2Cols' :data-source='middleWrapper2_2Data'></a-table>
          <div class='chart-title' style='margin-bottom: 20px'>责任成本测算报告: 《xxxxxxxxx》.doc</div>
        </div>
      </div>
      <div :class="'right-wrapper'">
        <div class='right-wrapper-1'>
          <div class='chart-title'>决策信息...</div>
          <a-table  :columns='rightWrapper1Cols' :data-source='rightWrapper1Data' :pagination='false'></a-table>

        </div>
        <div class='right-wrapper-2'>
          <div class='chart-title'>中标概况...</div>
          <a-table  :columns='rightWrapper2Cols' :data-source='rightWrapper2Data' :pagination='false'></a-table>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { chartPie, chartLine, chartStackLine, chartStackBar, chartHalfPie } from '@/components/BaseCharts/index'
import { axios } from '@/utils/request'
import * as lodash from 'lodash'

export default {
  name: 'index',
  components: { chartPie, chartLine, chartStackLine, chartStackBar, chartHalfPie },
  data() {
    return {
      selectProject: '1',
      leftWrapper1: {
        chartType: 'chartBar',
        refID: `rightWrapper1`,
        text: '',
        subText: '',
        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        series: [
          { name: '审计项目计划数', data: [120, 132, 101, 134, 90, 230, 120, 132, 101, 134, 90, 230], notStack: false },
          { name: '实际实施数', data: [220, 182, 191, 234, 290, 330, 220, 182, 191, 234, 290, 330], notStack: false }
        ]
      },
      leftWrapper2: {
        chartType: 'chartPie',
        refID: `chartPie1`,
        text: '',
        subText: '',
        series: [
          { data: [24], name: '类别1' },
          { data: [36], name: '类别2' },
          { data: [8], name: '类别3' },
          { data: [32], name: '类别4' }
        ]
      },
      leftWrapper3: {
        chartType: 'chartPie',
        refID: `chartPie1`,
        text: '',
        subText: '',
        series: [
          { data: [24], name: '类别1' },
          { data: [36], name: '类别2' },
          { data: [8], name: '类别3' },
          { data: [32], name: '类别4' }
        ]
      },
      middleWrapper1: {
        'logCount': '14',
        'goodsCount': '6',
        'equiptCount': '6',
        'zlCount': 3,
        'wzCount': 3,
        'fbCount': 2
      },
      middleWrapper2_1Cols: [
        {
          title: '项目责任收入',
          dataIndex: ''
        },
        {
          title: '项目责任成本',
          dataIndex: ''
        },
        {
          title: '责任利润',
          dataIndex: ''
        },
        {
          title: '责任利润率',
          dataIndex: ''
        },
        {
          title: '人工费',
          dataIndex: ''
        },
        {
          title: '材料费',
          dataIndex: ''
        }
      ],
      middleWrapper2_1Data: [],
      middleWrapper2_2Cols: [
        {
          title: '机械费',
          dataIndex: ''
        },
        {
          title: '其他直接费',
          dataIndex: ''
        },
        {
          title: '间接费',
          dataIndex: ''
        },
        {
          title: '其他',
          dataIndex: ''
        },
        {
          title: '临建费用',
          dataIndex: ''
        },
        {
          title: '现场管理经费',
          dataIndex: ''
        }
      ],
      middleWrapper2_2Data: [],
      rightWrapper1Cols: [
        {
          title: '决策信息名称',
          dataIndex: ''
        },
        {
          title: '决策信息',
          dataIndex: ''
        },
      ],
      rightWrapper1Data: [],
      rightWrapper2Cols: [
        {
          title: '中标概况事项',
          dataIndex: ''
        },
        {
          title: '中标概况信息',
          dataIndex: ''
        },
      ],
      rightWrapper2Data: [],

    }
  },
  created() {
    this.fetchLeft1()
    this.fetchLeft2()
    this.fetchLeft3()
    this.fetchMiddle1()
    this.fetchMiddle2()
    this.fetchRight1()
    this.fetchRight2()
    this.fetchRight3()
  },
  methods: {
    deepCopy(data) {
      return JSON.parse(JSON.stringify(data))
    },
    getRandom(arr) {
      let dp = [...arr]
      return dp.sort(() => Math.random() - 0.5)
    },
    handleProjectChange() {
      const leftWrapper1 = this.deepCopy(this.leftWrapper1)
      leftWrapper1.series = this.getRandom(leftWrapper1.series)
      this.leftWrapper1 = null

      setTimeout(() => {
        this.leftWrapper1 = leftWrapper1
      }, 100)

      const leftWrapper2 = this.deepCopy(this.leftWrapper2)
      leftWrapper2.series = this.getRandom(leftWrapper2.series)
      this.leftWrapper2 = null

      setTimeout(() => {
        this.leftWrapper2 = leftWrapper2
      }, 100)

      const leftWrapper3 = this.deepCopy(this.leftWrapper3)
      leftWrapper3.series.forEach(item => {
        item.data = this.getRandom(item.data)
      })

      this.leftWrapper3 = null
      setTimeout(() => {
        this.leftWrapper3 = leftWrapper3
      }, 100)

      const leftWrapper4 = this.deepCopy(this.leftWrapper4)
      leftWrapper4.series.forEach(item => {
        item.data = this.getRandom(item.data)
      })

      this.leftWrapper4 = null
      setTimeout(() => {
        this.leftWrapper4 = leftWrapper4
      }, 100)
    },

    async fetchLeft1() {
      const ret = await axios.get('/modelContractInfo/querBarData?projectId=510b33a7d056b8f93c0162d2038ff908')
      let { result } = ret
      const dataShadow = lodash.cloneDeep(this.leftWrapper1)
      dataShadow.xAxis = result.reduce((acc, cur) => {
        acc.push(cur.contractType)
        return acc
      }, [])
      dataShadow.series[0] = {
        name: '正常',
        data: result.reduce((acc, cur) => {
          acc.push(cur.isTLag)
          return acc
        }, [])
      }
      dataShadow.series[1] = {
        name: '疑似滞后',
        data: result.reduce((acc, cur) => {
          acc.push(cur.isTLag)
          return acc
        }, [])
      }
      this.leftWrapper1 = null
      setTimeout(() => {
        this.leftWrapper1 = dataShadow
      }, 100)
    },

    async fetchLeft2() {
      const ret = await axios.get('/modelContractInfo/queryContractTypeAmount?projectId=510b33a7d056b8f93c0162d2038ff908')
      let { result } = ret
      const dataShadow = lodash.cloneDeep(this.leftWrapper2)
      dataShadow.series = result.reduce((acc, cur) => {
        acc.push({ data: [cur.contractTypeAmount], name: cur.contractType })
        return acc
      }, [])
      this.leftWrapper2 = null
      setTimeout(() => {
        this.leftWrapper2 = dataShadow
      }, 100)
    },

    async fetchLeft3() {
      const ret = await axios.get('/modelContractInfo/queryContractTypeNum?projectId=510b33a7d056b8f93c0162d2038ff908')
      let { result } = ret
      const dataShadow = lodash.cloneDeep(this.leftWrapper3)
      dataShadow.series = result.reduce((acc, cur) => {
        acc.push({ data: [cur.contractTypeNum], name: cur.contractType })
        return acc
      }, [])
      this.leftWrapper3 = null
      setTimeout(() => {
        this.leftWrapper3 = dataShadow
      }, 100)
    },
    async fetchMiddle1() {
      const ret = await axios.get('/modelContractInfo/queryCount?projectId=510b33a7d056b8f93c0162d2038ff908')
      this.middleWrapper1 = ret.result
    },
    async fetchMiddle2() {
      const ret = await axios.get('/modelContractInfo/queryAllContractList?projectId=510b33a7d056b8f93c0162d2038ff908')
      ret.result.records.forEach(item => {
        item.isLagZh = item.isLag ? '是' : '否'
      })
      this.middleWrapper2Data = ret.result.records

    },
    async fetchRight1() {
      const ret = await axios.get('/modelContractInfo/queryGoodsList?projectId=510b33a7d056b8f93c0162d2038ff908')
      ret.result.forEach(item => {
        item.isLagZh = item.isLag ? '是' : '否'
      })
      this.rightWrapper1Data = ret.result

    },
    async fetchRight2() {
      const ret = await axios.get('/modelContractInfo/queryEquiptInfoList?projectId=510b33a7d056b8f93c0162d2038ff908')
      ret.result.forEach(item => {
        item.isLagZh = item.isLag ? '是' : '否'
      })
      this.rightWrapper2Data = ret.result

    },
    async fetchRight3() {
      const ret = await axios.get('/modelContractInfo/queryBuildLogList?projectId=510b33a7d056b8f93c0162d2038ff908')
      ret.result.forEach(item => {
        item.isLagZh = item.isLag ? '是' : '否'
      })
      this.rightWrapper3Data = ret.result

    }

  }
}
</script>

<style scoped lang='less'>
.ant-table-wrapper {
  width: 100%;
  background: transparent;

  ::v-deep {
    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
      background: rgba(255, 255, 255, 0.4);
      color: black !important;
    }

    .ant-table-body {
      color: white;
    }

    .ant-table-placeholder {
      background: transparent;
      border: none;

      * {
        color: white;
      }
    }

    .ant-spin-nested-loading {
      width: 100%;

      th, td {
        border-bottom: none;
      }

      .ant-table-thead {
        background-color: rgba(48, 106, 117, 0.6);
        height: 30px;
        line-height: 0.3;
        color: white;

        * {
          background: transparent;
          color: white;
        }
      }
    }
  }

}

.chart-title {
  background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  margin-top: 0.2vw;
  margin-left: 0.2vw;
  font-size: 0.8vw;
  font-weight: bold;
  left: 0;
  top: 0;
}

.big-screen-wrapper {
  width: 100%;
  height: calc(100% - 0px);
  background: url(~@/assets/hgxjc/lwdwyj/bg.png) no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-content: flex-start;
  justify-content: center;
  flex-direction: column;

  * {
    color: white;
  }

  .title-wrapper {
    background: url(~@/assets/hgxjc/lwdwyj/title.png) no-repeat;
    background-size: contain;
    position: relative;
    width: 100%;
    height: 110px;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    flex-direction: column;
    padding-top: 1vw;
    flex-shrink: 0;

    & > * {
      text-align: center;
      font-size: 1vw;
      background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      font-weight: bold;
    }

    & > .title {
      font-size: 1.3vw;
    }

    & > .category {
      margin-top: 0.1vw;

      /deep/ * {
        background: transparent !important;
        border: none !important;
        background-image: linear-gradient(95deg, #99e0c8, #13D4D5) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
      }
    }
  }

  .content-wrapper {
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;

    color: white;
    font-size: 0.3vw;

    & > div {
      background-image: linear-gradient(95deg, #99e0c8, #13D4D5) !important;
      background-clip: text !important;
      -webkit-background-clip: text !important;
      color: transparent !important;
      font-weight: bold;
    }

    .item1 {
      position: absolute;
      top: -2.4vh;
      left: 1.6vw;
    }

    .item2 {
      position: absolute;
      top: 7vh;
      left: 7vw;
    }

    .item3 {
      position: absolute;
      top: -1.8vh;
      left: 13.5vw;
    }

    .item4 {
      position: absolute;
      top: -1.8vh;
      left: 24.5vw;
    }

    .item5 {
      position: absolute;
      top: 6.8vh;
      left: 30.5vw;
    }

    .item6 {
      position: absolute;
      top: -2.6vh;
      left: 36vw;
    }

    & > div {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      &.middle-wrapper1 {
        flex: 1.5;

        background: url(~@/assets/hgxjc/lwdwyj/middle.png) no-repeat;
        background-size: contain;
        background-position: center center;
        position: relative;
      }

      &.right-wrapper1 {
        background: url(~@/assets/hgxjc/lwdwyj/right.png) no-repeat;
        background-size: contain;
        position: relative;
        background-position: center center;
      }

      &.middle-wrapper2 {
        flex: 1.5;
        background: url(~@/assets/hgxjc/lwdwyj/middle2.png) no-repeat;
        background-size: contain;
        background-position: center center;
        position: relative;
      }

      &.right-wrapper2 {
        background: url(~@/assets/hgxjc/lwdwyj/right2.png) no-repeat;
        background-size: contain;
        position: relative;
        background-position: center center;
      }

      &.left-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-left: 16px;
        height: 100%;
        flex-shrink: 0;

        & > div {
          margin: 4px 0;
          background-color: rgba(78, 78, 78, 0.3);
        }

        .chart-title {
          background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
          margin-top: 0.2vw;
          margin-left: 0.2vw;
          font-size: 0.8vw;
          font-weight: bold;
          left: 0;
          top: 0;
        }

        & > div {
          width: 100%;
          height: 100%;
          flex: 1;
          flex-shrink: 0;
          position: relative;

        }

        .left-wrapper-1 {
          .ant-row {
            height: 45px;
            text-align: center;
            font-size: 14px;
            border-bottom: 1px solid #114550;

            .ant-col {
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .title {
              background: rgba(9, 83, 94, 0.69);
            }
          }
        }

        .left-wrapper-2 {
          .ant-row {
            height: 45px;
            text-align: center;
            font-size: 14px;
            border-bottom: 1px solid #114550;
            background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;


            .ant-col {
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .title {
              background: rgba(9, 83, 94, 0.69);
              color: #06D1C0;
            }

            &.yellow {
              .ant-col {
                border: 1px solid #DE9A3B;

              }

              .title {
                background: rgba(222, 154, 59, 0.5);
                color: #F0932B;
              }
            }
          }
        }

        .left-wrapper-3 {
          .ant-row {
            height: fit-content;
            padding-left: 20px;
            text-align: left;
            font-size: 14px;
            border-bottom: 1px solid #114550;
            background-image: linear-gradient(95deg, #99e0c8, #13D4D5);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;

            & > .ant-col {
              margin: 4px 0;
            }


          }
        }
      }

      &.right-wrapper {
        flex: 1;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        height: 100%;
        overflow-y: hidden;

        & > div {
          margin: 4px 0;
          background-color: rgba(78, 78, 78, 0.3);
        }

        & > div {
          flex-shrink: 0;
          flex: 1;
          width: 100%;
          height: 33%;
          overflow-y: scroll;
        }
      }

      &.middle-wrapper {
        flex: 1.5;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;

        & > div {
          width: 100%;
        }

        .middle-wrapper-1 {
          flex: 2;
          background: url(~@/assets/htqdzhmx/middleBorder.png) no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          width: 100%;
          padding: 0 20px;

          .content-wrapper {

            background: url(~@/assets/htqdzhmx/模型框框.png) no-repeat;
            background-size: contain;
            background-position: center;
          }
        }

        .middle-wrapper-2 {
          flex: 1;
        }
      }
    }
  }
}
</style>